<template>
    <div class="commodity">
        <div class="data_list" v-for="(item,index) in list" :key="index">
            <div class="item">
                <div class="img">
                    <img :src="item.img" alt="">
                </div>
                <p class="text">{{item.text}}</p>
                <p class="price">${{item.price}}</p>
                <div class="look"> <span>看相似</span> </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name:'Commodity',
    data(){
        return{
            list:[
                {
                    img:"//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/139547/39/23601/320230/6194b214E17ece90e/722f197b25285330.jpg!q70.dpg.webp",
                    text:"鲁花花生油 5S 压榨一级  花生油",
                    price:"165.90",
                },
                {
                    img:"//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/127350/29/25576/108480/635e2771Ece9a29a5/3180a7c895bb13e7.jpg!q70.dpg.webp",
                    text:"奥克斯（AUX） 328升 多门冰箱四门十字对开门双开门电冰箱超薄纤薄机身 360°循环制冷 BCD-328P406L4 钛银灰",
                    price:"1889.00",
                },
                {
                    img:"//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/40204/16/19194/93809/6321c3d0E4a237100/f1ee35bd814c42f3.jpg!q70.dpg.webp",
                    text:"闪魔 苹果14promax手机壳 iPhone14 Pro Max气囊防摔超薄保护套镜头全包透明硅胶 全透明【十米防摔^透出裸机】",
                    price:"19.90",
                },
                {
                    img:"//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/116790/20/28266/67498/6350fab6E730c5662/dcd4c41b66b704b9.jpg!q70.dpg.webp",
                    text:"海天醋白醋450ml*2瓶酿造点蘸饺子炒菜凉拌家用调味品蘸料洗脸泡脚洗衣",
                    price:"12.50",
                },
                {
                    img:"//img10.360buyimg.com/mobilecms/s360x360_jfs/t1/39831/18/20174/185394/635d0cb4E247b6f12/2cf19c346e091d9c.jpg!q70.dpg.webp",
                    text:"伊利 金典纯牛奶250ml*16盒/箱 3.6g乳蛋白 礼盒装 早餐伴侣  ",
                    price:"69.90",
                },
            ]
        };
    },
};
</script>

<style lang="scss" scoped>
    .commodity{
        width: 680px;
        margin: 20px auto;
        padding-bottom: 100px;
        display: flex;
        flex-wrap: wrap;
        .data_list{
            display: flex;
            width: 50%;
            .item{
                // width: 50vw;
                // 箱内压缩盒模型的空间
                box-sizing: border-box;
                padding: 20px;
                p{
                    font-size: 28px;
                    margin: 0 10px;
                }
                .text{
                    width: 300px;
                    height: 75px;
                    // background-color: #f00;
                    // white-space: nowrap;
                    // -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .look{
                    display: flex;
                    justify-content: flex-end;
                    font-size: 30px;
                    span{
                        background-color: #eee;
                        padding: 5px 15px;
                        border-radius: 5px;
                    }
                }
                .price{
                    color: #f00;
                }
                .img{
                    text-align: center;
                    img{
                        width: 300px;
                    }
                }
            }
        }
    }
</style> 